<div class="row">
    <div class="col-md-6">
        <app-card [title]="'misc.highlight' | translate">
            <mat-form-field>
                <mat-label>{{'app.hotkey' | translate}}</mat-label>
                <input matInput [value]="'misc-stash-highlight' | hotkey" readonly>
                <a matSuffix [href]="'misc-stash-highlight' | hotkeyUrl">
                    <mat-icon> keyboard </mat-icon>
                </a>
            </mat-form-field>
        </app-card>
    </div>
    <div class="col-md-6">
        <app-card [title]="'misc.navigation' | translate">
            <mat-form-field>
                <mat-label>{{'misc.navigation' | translate}}</mat-label>
                <mat-select [(value)]="settings.miscNavigation" (valueChange)="onChange()">
                    <mat-option *ngFor="let navigation of navigations.keys" [value]="navigation">
                        {{'misc.navigations.' + (navigations.values[navigation] | lowercase) | translate}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </app-card>
    </div>
</div>